<template>
  <div class="adminyijianfankui">
    <admintop></admintop>
    <div style="padding: 20px 0px;">
      <div style="display: flex;">
        <el-input style="width:180px; margin-right: 20px;" v-model="all.shop_name" placeholder="请输入店铺名称"></el-input>

        <el-button @click="getlist"  type="danger">搜索</el-button>
      </div>
      <el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading">
        <el-table-column label="店铺名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shop_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="绑定商户" align="center">
          <template slot-scope="scope">

            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上次缴费时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.expiration_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抓单功能" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_apply" active-color="rgb(8, 201, 160)" inactive-color="rgb(220, 220, 220)" :active-value='0' :inactive-value='-1' @change="change_is_delivery(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="退款功能" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.hand_refund" active-color="rgb(8, 201, 160)" inactive-color="rgb(220, 220, 220)" :active-value='1' :inactive-value='0' @change="change_is_delivery(scope.row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="天幕回调地址" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.refund_notify_url">已配置 <i class="el-icon-edit" style="color: #409EFF; cursor: pointer; font-size: 20px; margin-left: 10px;" @click="xiugai2(scope.row)"></i></div>
            <div v-if="!scope.row.refund_notify_url">未配置 <i class="el-icon-edit" style="color: #409EFF; cursor: pointer; font-size: 20px; margin-left: 10px;" @click="xiugai2(scope.row)"></i></div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div style="text-align: center; color: #409EFF; cursor: pointer;" @click="xiugai(scope.row)">更新到期时间</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" style="padding: 20px; text-align: right;">
        <el-pagination background layout="prev, pager, next" @current-change="fanye" :page-size="all.page_size"
          :total="total"></el-pagination>
      </div>
    </div>
    <!-- 查看图片 -->
    <el-dialog title="修改打标状态" center :visible.sync="showimg" :close-on-click-modal="false" width="600px">
      <div>
        <el-radio v-model="fall.is_apply" :label="0">未打标</el-radio>
        <el-radio v-model="fall.is_apply" :label="1">已打标</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
      	<el-button type="info" @click="showimg = false">取消</el-button>
      	<el-button type="danger" @click="baocun">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改交费时间" center :visible.sync="log" :close-on-click-modal="false" width="440px">
      <div>
        <el-date-picker v-model="xiugaiall.expiration_time" value-format="yyyy-MM" type="month" placeholder="选择日期时间"></el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
      	<el-button type="info" @click="log = false">取消</el-button>
      	<el-button type="danger" @click="xiugaigo">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改天幕回调地址" center :visible.sync="log2" :close-on-click-modal="false" width="440px">
      <div>
        <el-input v-model="xiugaiall.refund_notify_url" placeholder="天幕回调地址"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
      	<el-button type="info" @click="log2 = false">取消</el-button>
      	<el-button type="danger" @click="xiugaigo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import admintop from './top.vue';
  import axios from 'axios'
  export default {
    components: {
      admintop
    },
    name: 'adminyijianfankui',
    data() {
      return {
        all: {
          shop_name:"",
          source:'jd',
          page_size: 20,
          page: 1,
        },
        fall:{
          is_apply:"",
          id:""
        },
        tableData: "",
        total: "",
        loading: true,
        //搜索店铺名称
        imglink:'',
        showimg:false,
        neirong:"",

        log2:false,
        log:false,
        xiugaiall:{
          id:"",
          is_apply:"",
          expiration_time:"",
          hand_refund:"",
          refund_notify_url:""
        }
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      this.getlist()
    },
    methods: {
      xiugai:function(item){
        this.xiugaiall = {
          id:item.id,
          expiration_time:item.expiration_time
        }
        this.log = true
      },
      xiugai2:function(item){
        this.xiugaiall = {
          id:item.id,
          refund_notify_url:item.refund_notify_url
        }
        this.log2 = true
      },
      xiugaigo:function(){
        axios.post('/api/plan-market/admin/outer-store/jd/update',this.xiugaiall)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('修改成功');
              this.getlist()
              this.log = false
              this.log2 = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      change_is_delivery:function(item){
        axios.post('/api/plan-market/admin/outer-store/jd/update',{
          id:item.id,
          is_apply:item.is_apply,
          hand_refund:item.hand_refund
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('修改成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      chakan:function(item){
        this.fall = {
          is_apply:item.is_apply,
          id:item.id,
          expiration_time:item.expiration_time
        }
        this.showimg = true
      },
      //放大图片
      openimg(url){
        console.log(url)
        this.imglink = url
        this.showimg = true
      },
      fanye:function(){
        this.all.page++
        this.getlist()
      },
      baocun:function(){
        axios.post('/api/plan-market/admin/outer_store/update/apply',this.fall)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('修改成功');
              this.getlist()
              this.showimg = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取全部
      getlist: function() {
        var that = this

        axios.get('/api/plan-market/admin/outer_store/list',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }

    },

  }
</script>

<style scoped>
  img{ max-width: 100%;}
  .adminyijianfankui {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
  }
  .t_btn_box{
    display: flex;
    justify-content: flex-end;
  }
</style>
